<template>
  <div class="timeRemaining">
    <el-tooltip placement="bottom" effect="light" v-if="isShowToolTip">
      <div slot="content">
        <span>
          开始时间：{{
            timeSetting.beginTime ? toYMD(timeSetting.beginTime) : "无"
          }}
          <br
        /></span>
        <span>
          结束时间：{{
            timeSetting.cutOffTime ? toYMD(timeSetting.cutOffTime) : "无"
          }}
        </span>
      </div>
      <i class="el-icon-warning" style="color: #f6ad35; margin-right: 5px"></i>
    </el-tooltip>
    <div
      class="lastTimeBox"
      v-if="timeSetting.cutOffTime && !isOvertime && !isUnStart"
    >
      <div class="lastTime" :style="{ width: `${lastPercent}px` }"></div>
    </div>
    <div class="time" v-if="isOvertime">
      已于{{ toYMD(timeSetting.cutOffTime) }}关闭
    </div>
    <div class="time" v-if="isUnStart">
      将于{{ toYMD(timeSetting.beginTime) }}开启
    </div>
    <div
      class="time"
      v-if="timeSetting.cutOffTime && !isOvertime && !isUnStart"
    >
      剩余: {{ countDown }}
    </div>
  </div>
</template>

<script>
import { countDown, toMs, renderTimeToYMD, currTime } from "@/util/tool";
export default {
  data() {
    return {
      time: 0,
      timer: null,
      lastPercent: 0,
      isPlanFinish: false,
      planTimer: null,
      defaultFinishTime: 600000,
      isChangeStateing: false,
    };
  },
  props: {
    timeSetting: Object,
    finishTaskData: Object, // 完成任务需要发送的参数
    item: Object,
    titem: Object,
    unShowGroupIcon: Boolean,
    chooseNo: Number,
  },
  watch: {
    time(newValue) {
      if (this.timeSetting.beginTime) {
        let defaultSetTime =
          toMs(this.timeSetting.cutOffTime) - toMs(this.timeSetting.beginTime);
        let currLastTime = toMs(this.timeSetting.cutOffTime) - this.getTime;
        let computedPercent = ((currLastTime / defaultSetTime) * 100).toFixed(
          2
        );
        this.lastPercent = computedPercent >= 100 ? 100 : computedPercent;
      } else {
        let divisor = this.getTime / toMs(this.timeSetting.cutOffTime);
        this.lastPercent =
          divisor >= 1
            ? 100
            : ((1 - (divisor - 0.999) * 1000) * 100).toFixed(2);
      }
      // 当前剩余时间
      let currLastTIme = toMs(this.timeSetting.cutOffTime) - this.getTime;
      // if (
      //   currLastTIme < this.defaultFinishTime &&
      //   this.titem?.state !== "已学" &&
      //   !this.unShowGroupIcon &&
      //   this.chooseNo
      // ) {
      //   this.setTimer(Math.floor(currLastTIme));
      // }
    },
  },
  computed: {
    countDown() {
      return countDown(this.getTime, this.timeSetting.cutOffTime);
    },
    isOvertime() {
      if (this.timeSetting.cutOffTime) {
        return toMs(this.timeSetting.cutOffTime) < +this.getTime;
      } else return false;
    },
    isUnStart() {
      if (this.timeSetting.beginTime) {
        return toMs(this.getTime) < toMs(this.timeSetting.beginTime);
      } else return false;
    },
    toYMD() {
      return (date) => {
        return renderTimeToYMD(date) + " " + currTime(date);
      };
    },
    lastTime() {
      return parseInt(
        parseInt((toMs(this.timeSetting.cutOffTime) - +this.getTime) / 1000) /
          60 /
          60 /
          24
      );
    },
    getTime() {
      return this.time;
    },
    // 判断当前时间是否需要显示限时提示
    isShowToolTip() {
      if (this.timeSetting.beginTime || this.timeSetting.cutOffTime) {
        if (toMs(this.timeSetting.beginTime) < toMs(new Date()) && !this.timeSetting.cutOffTime) return false;
        return true;
      }
      return false;
    },
  },
  created() {
    this.time = new Date().getTime();
    this.timer = setInterval(() => {
      this.time = new Date().getTime();
    }, 1000);
  },
  methods: {
    setTimer(time) {
      if (!this.planTimer) {
        this.planTimer = setTimeout(() => {
          if (!this.isChangeStateing) {
            this.$emit(
              "handlePlanFinishTask",
              this.item,
              this.titem,
              this.finishTaskData,
              "isAutoFinish"
            );
            this.isChangeStateing = true;
            clearTimeout(this.planTimer);
          }
        }, time);
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    if (this.planTimer) clearTimeout(this.planTimer);
  },
};
</script>

<style lang="stylus" scoped>
.timeRemaining {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  position: relative;
  margin-left: 25px;
  margin-top: 7px;

  // overflow: hidden;
  .lastTimeBox {
    margin-right: 10px;
    width: 100px;
    height: 13px;
    background-color: #eaeaea;
    border-radius: 15px;
    border: 1px solid #d2d6dc;
    overflow: hidden;

    .lastTime {
      height: 12px;
      background: #5ad551;
      border-radius: 15px;
    }
  }

  .time {
    position: relative;
    font-size: 12px;
    color: #000000;
  }
}
</style>